<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/header"/>
<body>

<!--导航-->
<header th:include="common/nav" />

<!--食谱信息盒子-->
<div class="cookbook shadow-right-bottom">
    <div class="cover-img"><img class="cover-img" th:src="${cookbook.coverimg}"></div>
    <div class="info">
        <div class="title" th:text="${cookbook.cookbookname}"></div>
        <ul class="describe">
            <li>
                <span class="name">适宜人群</span>
                <span class="content" th:text="${cookbook.appropriatecrowd}"></span>
            </li>
            <li>
                <span class="name">工艺</span>
                <span class="content" th:text="${cookbook.craft}">煮</span>
            </li>
            <li>
                <span class="name">口味</span>
                <span class="content" th:text="${cookbook.taste}">清淡</span>
            </li>
            <li>
                <span class="name">烹饪时间</span>
                <span class="content" th:text="${cookbook.duration}">2小时</span>
            </li>
            <li>
                <span class="name">难度</span>
                <span class="content" th:text="${cookbook.difficulty}">神级</span>
            </li>
        </ul>
        <div class="material">
            <span class="category-name">食材</span>
            <ul class="ul-material complement">
                <li class="li-material" th:each="cookbookFood : ${cookbookFoods}">
                    <span class="food" th:text="${cookbookFood.food.food}"></span>
                    <span class="deal"><span th:text="${cookbookFood.weight}"></span>g</span>
                    <span class="money"><span th:text="${cookbookFood.food.price}"></span>元</span>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--步数-->
<div th:each="cookbookStep : ${cookbookSteps}">
    <div class="step-number" th:text="${cookbookStep.order}"></div>
    <div id="stepCarousel" class="step-carousel carousel shadow-right-bottom">
        <div class="carousel-inner">
            <div class="item active">
                <div class="step-content"><p class="content" th:text="${cookbookStep.stepcontent}"></p></div>
                <div class="step-img"><img class="step-img" th:src="${cookbookStep.stepimg}"/></div>
            </div>
        </div>
    </div>
</div>

<!--间隔-->
<div class="interval"></div>

<!--弹幕-->
<div id="bulletScreen" th:data="${cookbook.id}" class="bullet-screen shadow-right-bottom">
    <div id="bsTip" class="tip">暂无弹幕~</div>
</div>

<!--间隔-->
<div class="interval"></div>

<div class="discuss shadow-right-bottom">
    <div class="submit-discuss">
        <input id="discussContent" class="input-discuss" placeholder="留下一条神评！"
            maxlength="20"
            onchange="this.value=this.value.substring(0, 20)"
            onkeydown="this.value=this.value.substring(0, 20)"
            onkeyup="this.value=this.value.substring(0, 20)">
        </input>
        <input id="discussSubmit" th:data="${cookbook.id}" onclick="discussSubmit()" class="input-submit shadow-right-bottom" type="submit" value="弹一下"/>
    </div>
</div>

<div class="tipBtn">
    <div class="btn-div collect"  th:data="${cookbook.id}">收藏</div>
    <div class="btn-div shopping-cart"  th:data="${cookbook.id}">购物车</div>
</div>

<div th:include="common/bottom"></div>

</body>
    <script th:src="@{/js/cookbook.js}"></script>
    <link rel="stylesheet" th:href="@{/css/cookbook.css}"/>
</html>